<template>
  <div style="background: #f4f4f4;">
    <div style="margin: 0 auto; width: 60%; padding: 25px">
      <div class="app-container">
        <h2>作业课程：{{formData.courseName}}</h2>
        <h3>{{ formData.taskName }} (满分：{{ formData.fullScore }}) —— 得分:{{ formData.actualScore }}分</h3>
        <el-form
            ref="ruleForm"
            :model="formData"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
        >
          <h4 v-if="formData.one.length>0">单选题({{ formData.taskOneScore }}分)</h4>
          <div v-for="item in formData.one">
            <span style="display: block">题目({{ item.totalScore }}分)：{{item.content}}</span>
            <span style="display: block; margin-top: 20px">A：{{item.options.split(",")[0]}}</span>
            <span style="display: block; margin-top: 5px">B：{{item.options.split(",")[1]}}</span>
            <span style="display: block; margin-top: 5px">C：{{item.options.split(",")[2]}}</span>
            <span style="display: block; margin-top: 5px">D：{{item.options.split(",")[3]}}</span>
            <span style="display: block; margin-top: 20px; margin-bottom: 10px;color: #1482f0"> 标准答案：{{item.answer}}</span>
            <div v-if="item.actualScore>0" style="display: block; margin-top: 5px; margin-bottom: 25px;color: #4d855a"> 答案：{{item.optionAnswer}}   得分{{item.actualScore}} 分</div>
            <div v-if="item.actualScore<=0" style="display: block; margin-top: 5px; margin-bottom: 25px;color: red"> 答案：{{item.optionAnswer}}   得分{{item.actualScore}} 分</div>
          </div>

          <h4 v-if="formData.two.length>0">多选题({{ formData.taskTwoScore }}分)</h4>
          <div  v-for="item in formData.two">
            <span style="display: block">题目({{ item.totalScore }}分)：{{item.content}}</span>
            <span style="display: block; margin-top: 20px">A：{{item.options.split(",")[0]}}</span>
            <span style="display: block; margin-top: 5px">B：{{item.options.split(",")[1]}}</span>
            <span style="display: block; margin-top: 5px">C：{{item.options.split(",")[2]}}</span>
            <span style="display: block; margin-top: 5px">D：{{item.options.split(",")[3]}}</span>
            <span style="display: block; margin-top: 20px; margin-bottom: 10px;color: #1482f0"> 标准答案：{{item.answer}}</span>
            <div v-if="item.actualScore>0" style="display: block; margin-top: 5px; margin-bottom: 25px;color: #4d855a"> 答案：{{item.optionAnswer}}   得分{{item.actualScore}} 分</div>
            <div v-if="item.actualScore<=0" style="display: block; margin-top: 5px; margin-bottom: 25px;color: red"> 答案：{{item.optionAnswer}}   得分{{item.actualScore}} 分</div>
          </div>
          <h4 v-if="formData.three.length>0">判断选题({{ formData.taskThreeScore }}分)</h4>
          <div  v-for="item in formData.three">
            <span style="display: block">题目({{ item.totalScore }}分)：{{item.content}}</span>
            <span style="display: block; margin-top: 20px">A：{{item.options.split(",")[0]}}</span>
            <span style="display: block; margin-top: 5px">B：{{item.options.split(",")[1]}}</span>
            <span style="display: block; margin-top: 20px; margin-bottom: 10px;color: #1482f0"> 标准答案：{{item.answer}}</span>
            <div v-if="item.actualScore>0" style="display: block; margin-top: 5px; margin-bottom: 25px;color: #4d855a"> 答案：{{item.optionAnswer}}   得分{{item.actualScore}} 分</div>
            <div v-if="item.actualScore<=0" style="display: block; margin-top: 5px; margin-bottom: 25px;color: red"> 答案：{{item.optionAnswer}}   得分{{item.actualScore}} 分</div>
          </div>

          <h4 v-if="formData.discussContext.length>0">主观题({{ formData.discussScore }}分)</h4>
          <div  v-for="item in formData.discussContext">
            <span style="display: block">题目({{ item.totalScore }}分)：{{item.content}}</span>
            <span style="display: block; margin-top: 20px; margin-bottom: 10px;color: #1482f0"> 标准答案：{{item.discussContext}}</span>
            <span style="display: block; margin-top: 5px; margin-bottom: 25px"> 答案：{{item.discussContextAnswer}}</span>
            <div v-if="item.actualScore>0" style="display: block; margin-top: 5px; margin-bottom: 25px;color: #7cf69e"> 得分{{item.actualScore}} 分</div>
            <div v-if="item.actualScore<=0" style="display: block; margin-top: 5px; margin-bottom: 25px;color: red"> 得分{{item.actualScore}} 分</div>
          </div>
          <el-form-item>
            <el-button style="margin-left: 200px;" type="primary" @click="submitForm()">关闭</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import store from "@/store";
import { getQuestion, getQuestionResult } from "@/api/student/workTaskStudent";

export default {
  name: "info",
  data() {
    return {
      deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
      checkedData: [],
      headers: {
        Authorization: "Bearer " + store.getters.token,
      },
      taskId: "",
      formData: {
        id: '',
        one: [],
        two: [],
        three: [],
        taskOneScore: "",
        discussScore: "",
        taskTwoScore: "",
        taskThreeScore: "",
        fullScore: "",
        taskName: "",
        taskId: "",
        endTime: ""
      },
      rules: {}
    };
  },
  created() {
    this.taskId=this.$route.params.id
    this.getExamItem();
  },
  methods: {
    getExamItem() {
      console.log('this.formData.taskId',this.formData.taskId,this.$route.params.id)
      getQuestionResult({'taskId': this.$route.params.id}).then((res) => {
        this.formData = res.data
      })
    },
    retrunPage() {
      this.$router.push({ name: 'homeworkOnLine'})
    }
  }
}
</script>
<style lang="scss">
</style>
